<template>
  <span :style="{ width: width + 'px', height: width + 'px' }" class="icon">
    <img :src="getImage()" :style="{ 'object-fit': fit }" />
  </span>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  fileType: {
    type: String, // 修改为 String 因为 fileType 是后缀名（大写），而不是数字
  },
  iconName: {
    type: String,
  },
  cover: {
    type: String,
  },
  width: {
    type: Number,
    default: 32,
  },
  fit: {
    type: String,
    default: "cover",
  },
});

const fileTypeMap = {
  文件夹: { desc: "目录", icon: "folder" },
  MP4文件: { desc: "视频", icon: "video" },
  MP3文件: { desc: "音频", icon: "music" },
  JPG文件: { desc: "图片", icon: "image" },
  PNG文件: { desc: "图片", icon: "image" },
  EXE文件: { desc: "exe", icon: "exe" },
  DOC文件: { desc: "doc", icon: "word" },
  EXCEL文件: { desc: "excel", icon: "excel" },
  TXT文件: { desc: "纯文本", icon: "txt" },
  CODE文件: { desc: "程序", icon: "code" },
  ZIP文件: { desc: "压缩包", icon: "zip" },
  其他文件: { desc: "其他文件", icon: "others" },
};

const getImage = () => {
  if (props.cover) {
    return proxy.globalInfo.imageUrl + props.cover;
  }

  let icon = "unknow_icon"; // 默认图标

  if (props.iconName) {
    icon = props.iconName; // 如果提供了 iconName，则使用它
  } else {
    // 尝试根据 fileType 查找图标
    const iconMap = fileTypeMap[props.fileType];
    console.log("fileType:", props.fileType);
    
    if (iconMap) {
      icon = iconMap.icon; // 如果能够找到对应的图标，则使用它
    } else {
      // 如果没有找到，使用 "其他文件" 的图标
      icon = fileTypeMap['其他文件'].icon;
    }
  }
  
  return new URL(`/src/assets/icon-image/${icon}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.icon {
  text-align: center;
  display: inline-block;
  border-radius: 3px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
